<template>
  <div class="main">
    <!-- 头部组件 -->
    <comp-det-heater>
      <template v-slot:left>
        <!-- <router-link to="/home/index"> -->
          <div class="left" @click="$router.go(-1)"><van-icon name="arrow-left" /></div>
        <!-- </router-link> -->
      </template>
      <template v-slot:center>
        <span>商品详情</span>
      </template>
      <template v-slot:right>
        <div class="iconfont" @click="share">&#xe603;</div>
      </template>
    </comp-det-heater>
    <!-- 轮播图 -->

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in product[i].bannerurl" :key="item">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品内容 -->
    <div class="content">
      <div class="form">
        <div class="price">
          ￥<span>{{ product[i].price }}</span>
        </div>
        <div class="name">{{ product[i].title }}</div>
        <div class="introduce">{{ product[i].introduce }}</div>
        <div class="model">{{ product[i].model }}</div>
        <div class="other" @click="other">其他型号<span><van-icon name="arrow" /></span></div>
      </div>
      <div class="imgList" v-for="item in product[i].url" :key="item">
        <img :src="item" alt="" />
      </div>
    </div>
    <!-- 其他色号 -->
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      description="其他色号"
      close-on-click-action
    />
    <!-- 底部框 -->
    <div class="bottom">
      <div
        class="collection iconfont"
        @click="collect"
        :class="isCollect == true ? 'active' : ''"
      >
        &#xe635;
      </div>
      <div class="share iconfont" @click="share">&#xe603;</div>
    </div>
    <!-- 分享 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <Qrcode v-if="qcShow" :sid="$route.fullPath" :text="product[i].title"></Qrcode>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import CompDetHeater from "../components/comp-detHeater.vue";
import Qrcode from "@/components/comp-qrcode.vue";
export default {
  data() {
    return {
      showShare: false,
      qcShow:false,
      t:null,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      show: false,
      actions: [
        { name: "迪奥#999" },
        { name: "迪奥#909" },
        // { name: "选项三", subname: "描述信息" },
      ],
    };
  },
  methods: {
    ...mapMutations(['setCollection']),
    // 收藏
    collect() {
      if(this.token){
        this.$store.commit('setCollection',{i:this.i,isCollect: !this.isCollect})
      }else{
        this.$router.push('/login')
      }
    },
    share() {
      this.showShare = true;
      console.log(this.showShare);
    },
    other() {
      this.show = !this.show;
    },
    onSelect(option){
      this.t = null;
      if(option.name=='二维码'){
        this.qcShow = true
      }
      this.showShare = false
      this.t = setTimeout(()=>{
        this.qcShow = false
      },5000)
    }
  },
  computed: {
    ...mapState(["product",'token']),
    i(){
      return  this.$route.query.i;
    },
    isCollect(){
      return this.product[this.i].isCollect
    }
  },
  components: {
    CompDetHeater,
    Qrcode
  },
};
</script>
<style scoped lang="scss">
.main {
  padding-top: 60px;
  padding-bottom: 60px;
  background: #f0f0f0;
  .my-swipe .van-swipe-item {
    width: 100%;
    height: 500px;
    text-align: center;
    img {
      width: 100%;
      height: 500px;
    }
  }
  .content {
    background: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
    .form {
      width: 100%;
      border-radius: 20px;
      background: #fff;
      display: flex;
      flex-direction: column;
      padding: 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
      .price {
        width: 100%;
        height: 50px;
        color: #e24a16;
        line-height: 50px;
        font-size: 16px;
        span {
          font-size: 24px;
        }
      }
      .name {
        width: 100%;
        //   background: blue;
        font-size: 18px;
      }
      .introduce {
        width: 100%;
        font-size: 16px;
        color: rgb(136, 136, 136);
        line-height: 30px;
      }
      .model {
        width: 100%;
        height: 30px;
        text-align: right;
        font-size: 16px;
        line-height: 30px;
        color: rgb(75, 75, 255);
      }
      .other {
        width: 100%;
        height: 40px;
        border-top: 1px solid #ccc;
        text-align: center;
        font-size: 20px;
        line-height: 40px;
        color: rgb(139, 139, 139);
        position: relative;
        span {
          position: absolute;
          top: 0;
          right: 0;
          width: 40px;
          height: 40px;
          display: block;
        }
      }
    }
    .imgList {
      width: 100%;
      //   height: 300px
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    .iconfont {
      width: 60px;
      height: 60px;
      font-size: 30px;
      text-align: center;
      line-height: 60px;
      color: rgb(97, 97, 97);
    }
    .active {
      color: #e24a16;
    }
  }
  .qrcode{
    position: sticky;
    bottom: 100px;
  }
}
</style>